<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="课程标题">
              <a-input placeholder="输入课程标题" v-model="queryParam.title"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('文章列表')">导出</a-button>
      <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
      <!-- 高级查询区域 -->
      <j-super-query :fieldList="superFieldList" ref="superQueryModal"
        @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
          selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="showDrawer(record, '1')">视频</a>
          <a-divider type="vertical" />
          <a @click="showDrawer(record, '2')">课程资料</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => onChangeIsHot(record)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <a-drawer title="课程目录" width="70%" :closable="false" :visible="visible" @close="onClose">
      <div>
        <a-button class="j-table-add-btn" @click="showModalcatalogEditing()" type="primary" icon="plus">新增</a-button>
        <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="contents"
          :dataSource="VideoCatalog" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            <a @click="showChildrenDrawer(record, record.fileType)">资料</a>
            <a-divider type="vertical" />
            <a @click="showModalcatalogEditing(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => deleteCatalog(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
      <a-drawer title="图片" width="60%" :closable="false" :visible="childrenDrawer" @close="onChildrenDrawerClose"
        v-if="fileType == '3'">
        <a-button class="j-table-add-btn" @click="showModalcatalogEditingimg()" type="primary" icon="plus">新增</a-button>
        <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="chapterimage"
          :dataSource="tableofcontents" :loading="loading"
          :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          class="j-table-force-nowrap" @change="handleTableChange">
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt=""
              style="max-width:80px;font-size: 12px;font-style: italic;" />
          </template>
          <span slot="action" slot-scope="text, record">
            <a @click="showModalcatalogEditingimg(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => deleteSection(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-drawer>
      <a-drawer title="章节" width="60%" :closable="false" :visible="childrenDrawer" @close="onChildrenDrawerClose"
        v-else>
        <a-button class="j-table-add-btn" @click="showModalcatalog()" type="primary" icon="plus">新增</a-button>
        <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="chapter"
          :dataSource="tableofcontents" :loading="loading"
          :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          class="j-table-force-nowrap" @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            <a @click="showModalcatalog(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => deleteSection(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-drawer>
      <div :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }">
        <a-button type="primary" @click="onClose">
          确定
        </a-button>
      </div>
    </a-drawer>
    <a-modal title="章节" :visible="confirmchapter" :confirm-loading="Loadingchapter" @ok="bddnewdirectory"
      @cancel="handleCancelvideol">
      <div>
        <span class="listtitleaction">
          <span>
            搜索：
          </span>
          <span>
            <a-input width="200px" v-model="searchchapter" placeholder="请输入章节名称"></a-input>
          </span>
          <span class="listtitleactionbutton">
            <a-button type="primary" @click="videos(1)">
              确定
            </a-button>
          </span>
        </span>

      </div>
      <span>
        <a-form-model-item label="章节名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileName">
          <a-input v-model="volcanoChapter.fileName" placeholder="请输入章节名称"></a-input>
        </a-form-model-item>
      </span>
      <span class="videolisttitleaction">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="54">
              <a-form-model-item label="是否付费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
                <j-dict-select-tag type="list" v-model="model.status" dictCode="whether_pay" placeholder="请选择是否付费" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </span>
      <span class="videolisttitleaction">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
                <a-input-number v-model="model.sort" placeholder="请输入排序，默认0" style="width: 100%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </span>
      <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="volcano"
        :dataSource="videosList" :pagination="ipagination" :loading="loading"
        :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap" @change="handleTableChangea">
        <span slot="action" slot-scope="text, record">
        </span>
      </a-table>
    </a-modal>
    <a-modal title="目录" :visible="catalogEditing" @ok="Addnewdirectory(0)" @cancel="handleCancel">
      <span>
        <a-form-model-item label="目录名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
          <a-input v-model="model.title" placeholder="请输入目录名称"></a-input>
        </a-form-model-item>
      </span>
      <span class="videolisttitleaction">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
                <a-input-number v-model="model.sort" placeholder="请输入排序，默认0" style="width: 100%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </span>
      <span class="videolisttitleaction">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="54">
              <a-form-model-item label="类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
                <j-dict-select-tag type="list" :disabled="true" v-model="model.type" dictCode="directory_content"
                  placeholder="请选择类别" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </span>
      <span class="videolisttitleaction">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="54">
              <a-form-model-item label="视频内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileType">
                <j-dict-select-tag type="list" :disabled="Selectproduct" v-model="model.fileType" dictCode="file_type"
                  placeholder="请选择视频内容" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </span>
    </a-modal>
    <a-modal title="图片" :visible="catalogEditingimg" @ok="bddnewdirectoryimg(0)" @cancel="handleCancelimg">
      <span class="videolisttitleaction">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
                <a-input-number v-model="model.sort" placeholder="请输入排序，默认0" style="width: 100%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </span>
      <span>
        <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
          <a-input v-model="model.title" placeholder="请输入章节名称"></a-input>
        </a-form-model-item>
      </span>
      <span class="videolisttitleaction">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="曲谱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageUri">
                <j-image-upload biz-path="laile2/goods" acceptFormat="image/png, image/jpeg" v-model="model.imageUri">
                </j-image-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </span>
    </a-modal>
    <mk-content-base-modal ref="modalForm" @ok="modalFormOk"></mk-content-base-modal>
  </a-card>
</template>
<script>

import '@/assets/less/TableExpand.less'
import { httpAction, getAction, postAction } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import MkContentBaseModal from './modules/CourseProductsModal.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'

import { defineComponent, ref } from 'vue';
import { Modal, Drawer } from 'ant-design-vue';


export default {
  name: 'MkContentBaseList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    MkContentBaseModal
  },

  data() {
    return {
      videoUri: 'aa',
      model: {
        sort: 0
      },
      tableofcontents: {},
      videosList: {},
      description: '文章列表管理页面',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '创建日期',
          align: "center",
          dataIndex: 'createTime',
          customRender: function (text) {
            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
          }
        },
        {
          title: '课程标题',
          align: "center",
          dataIndex: 'title'
        },
        // {
        //   title: '课程封面',
        //   align: "center",
        //   dataIndex: 'cover',
        //   scopedSlots: { customRender: 'imgSlot' }
        // },
        {
          title: '课程价钱',
          align: "center",
          dataIndex: 'price'
        },
        {
          title: '课程分类',
          align: 'center',
          dataIndex: 'isHot',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            return text == '1' ? '推荐' : '非推荐';
          }
        },
        {
          title: '排序',
          align: "center",
          dataIndex: 'sort'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      contents: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '目录名称',
          align: "center",
          dataIndex: 'title'
        },
        {
          title: '类别',
          align: 'center',
          dataIndex: 'type',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            return text == '1' ? '目录' : '章节';
          }
        },
        {
          title: '目录内容',
          align: 'center',
          dataIndex: 'fileType',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            if (text == '1') {
              return '视频';
            } else if (text == '2') {
              return '目录';
            } else if (text == '3') {
              return '曲谱';
            } else if (text == '4') {
              return '伴奏';
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      chapter: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '章节名称',
          align: "center",
          dataIndex: 'title'
        },
        {
          title: '类别',
          align: 'center',
          dataIndex: 'type',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            return text == '1' ? '目录' : '章节';
          }
        },
        {
          title: '目录内容',
          align: 'center',
          dataIndex: 'fileType',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            if (text == '1') {
              return '视频';
            } else if (text == '2') {
              return '目录';
            } else if (text == '3') {
              return '曲谱';
            } else if (text == '4') {
              return '伴奏';
            }
          }
        },
        {
          title: '是否付费',
          align: "center",
          dataIndex: 'status',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            return text == '1' ? '免费' : '付费';
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      chapterimage: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '章节名称',
          align: "center",
          dataIndex: 'title'
        },
        {
          title: '商品图片',
          align: 'center',
          dataIndex: 'imageUri',
          scopedSlots: { customRender: 'imgSlot' }
        },
        {
          title: '类别',
          align: 'center',
          dataIndex: 'type',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            return text == '1' ? '目录' : '章节';
          }
        },
        {
          title: '目录内容',
          align: 'center',
          dataIndex: 'fileType',
          filterMultiple: false,
          onFilter: (value, record) => record.status === value,
          customRender: (text) => {
            if (text == '1') {
              return '曲谱';
            } else if (text == '2') {
              return '曲谱';
            } else if (text == '3') {
              return '曲谱';
            } else if (text == '4') {
              return '曲谱';
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      volcano: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '章节名称',
          align: "center",
          dataIndex: 'fileName'
        },
        {
          title: '类型',
          align: "center",
          dataIndex: 'format'
        },


      ],
      ipagination: {
        current: 1, // 当前页码
        pageSize: 10, // 每页显示的记录数
        total: 0, // 总记录数
        showSizeChanger: true, // 是否显示每页显示数量的下拉菜单
        pageSizeOptions: ['10', '20', '50', '100'], // 每页显示数量的选项
      },
      url: {
        list: "/course/page",
        delete: "/course/delete",
        deleteBatch: "/contentBase/mkContentBase/deleteBatch",
        exportXlsUrl: "/contentBase/mkContentBase/exportXls",
        importExcelUrl: "contentBase/mkContentBase/importExcel",
        cataloguegetById: "/catalogue/getByCourseId", //根据课程id查询目录-章节-曲谱列表
        cataloguelist: "/catalogue/list", //课程信息目录列表查询
        videos: "/videos/page", //视频信息
        addCatalog: "/catalogue/addCatalog", //新增目录-章节
        updateCatalog: "/catalogue/updateCatalog", //更新目录-章节
        deleteCatalog: "/catalogue/deleteCatalog", //删除目录-章节
        deleteSection: "/catalogue/deleteSection", //删除章节
        getByPId: "/catalogue/getByPId", //根据课程查询-章节-曲谱列表
      },
      dictOptions: {},
      superFieldList: [],
      visible: false,
      childrenDrawer: false,
      VideoCatalog: [],
      catalogEditing: false,
      catalogEditingimg: false,
      confirmLoading: false,
      ModalText: 'Content of the modal',

      confirmchapter: false,
      Loadingchapter: false,
      judge: '',
      courseId: '',
      searchchapter: '',
      volcanoChapter: {},
      type: '',
      fileType: '',
      Selectproduct: false
      // afterVisibleChange,
      // showDrawer,
    }
  },

  created() {
    this.getSuperFieldList();
    console.log(this.superFieldList);

  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      // 执行你的逻辑操作
      console.log("选中的行 keys:", selectedRowKeys);
      console.log("选中的行数据:", selectedRows);
      // 更新组件中的 selectedRowKeys 数据
      this.selectedRowKeys = selectedRowKeys;
      this.volcanoChapter = selectedRows[0]
      console.log(this.volcanoChapter, 'zhangjie');


    },
    deleteCatalog(radio) {
      let that = this
      console.log('1');
      let id = {
        id: radio.id
      }
      postAction(that.url.deleteCatalog, id).then(res => {
        console.log('2');
        this.confirmLoading = true;
        that.CourseCatalog(that.courseId, this.type)
      }).finally(() => {
        that.loading = false
      })
    },
    deleteSection(radio) {
      let that = this
      console.log('1');
      let id = {
        id: radio.id
      }
      postAction(that.url.deleteSection, id).then(res => {
        console.log('2');
        this.confirmLoading = true;
        this.getByPIdcontents(that.pid, this.fileType)
      }).finally(() => {
        that.loading = false
      })
    },
    showModalcatalogEditing(radio) {
      this.catalogEditing = true;
      if (radio) {
        this.model = radio
        this.judge = '1'
      }
      if (!radio) {
        this.model.title = ''
        this.judge = '2'
      }
      console.log(this.judge, 'judge');

      console.log(radio, 'radio');

    },
    showModalcatalogEditingimg(radio) {
      this.catalogEditingimg = true;
      if (radio) {
        this.model = radio
        this.judge = '1'
        console.log(this.model, 'showModalcatalogEditingimg');

      }
      if (!radio) {
        this.model.title = ''
        this.model.imageUri = ''
        this.judge = '2'
        console.log('2', 'showModalcatalogEditingimg');
      }
      console.log(this.pid, 'pid');
      this.videos(1)

    },
    showModalcatalog(radio) {
      this.confirmchapter = true;
      if (radio) {
        this.model = radio
        this.judge = '1'
      }
      if (!radio) {
        this.model.title = ''
        this.judge = '2'
      }
      console.log(this.pid, 'pid');
      this.videos(1)
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.catalogEditing = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.catalogEditing = false;
    },
    handleCancelimg(e) {
      console.log('Clicked cancel button');
      this.catalogEditingimg = false;
    },
    handleCancelvideol(e) {
      console.log('Clicked cancel button');
      this.confirmchapter = false;
    },
    showDrawer(record, type) {
      console.log(record.id, 'showDrawer');
      this.visible = true;
      // this.model.fileType = type
      this.model.type = '1'
      console.log(this.model);
      if (type == '1') {
        this.model.fileType = '1'
        this.Selectproduct = true
      }
      if (type == '2') {
        // this.model.fileType = null
        this.Selectproduct = false
      }
      this.type = type
      this.CourseCatalog(record.id, this.type)
    },
    onClose() {
      this.visible = false;
    },
    showChildrenDrawer(record, fileType) {
      this.childrenDrawer = true;
      this.fileType = fileType
      this.getByPIdcontents(record.id, fileType)
    },
    onChildrenDrawerClose() {
      this.childrenDrawer = false;
    },
    appendDirectory() {
      this.VideoCatalog.push({
        title: '',
        sectionVoList: [],
      });
    },
    append(item) {
      item.sectionVoList.push({});
    },
    afterVisibleChange(val) {
      console.log('visible', val);
    },

    onClose() {
      this.visible = false;
    },
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'date', value: 'createTime', text: '创建日期' })
      fieldList.push({ type: 'string', value: 'title', text: '标题', dictCode: '' })
      fieldList.push({ type: 'Text', value: 'content', text: '正文', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cover', text: '封面', dictCode: '' })
      fieldList.push({ type: 'int', value: 'views', text: '浏览次数', dictCode: '' })
      fieldList.push({ type: 'string', value: 'type', text: '文章类型', dictCode: 'content_type' })
      this.superFieldList = fieldList
    },
    onChangeIsHot(record) {
      console.log(record, '删除')
      var that = this
      that.loading = true
      postAction(this.url.delete, {
        id: record.id
      }).then(res => {
        if (res.success) {
          //重新计算分页问题
          record = res.result
          that.reCalculatePage(that.selectedRowKeys.length)
          that.$message.success(res.message)
          that.loadData()
          that.onClearSelected()
        } else {
          that.$message.warning('操作异常,请稍后再试')
        }
      }).finally(() => {
        that.loading = false
      })
    },
    CourseCatalog(record, type) {
      console.log(record, '删除')
      var that = this
      getAction(this.url.cataloguegetById, {
        courseId: record,
        type: type,
        fileType: type
      }).then(res => {
        this.VideoCatalog = res.result
        this.courseId = record
        console.log(this.VideoCatalog, '目录');
      }).finally(() => {
        that.loading = false
      })
    },
    getByPIdcontents(record, fileType) {
      console.log(record, '删除')
      var that = this
      getAction(this.url.getByPId, {
        pId: record,
        fileType: fileType
      }).then(res => {
        this.tableofcontents = res.result
        this.pid = record
        console.log(this.VideoCatalog, '目录');
      }).finally(() => {
        that.loading = false
      })
    },
    handleTableChangea(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      console.log(pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.videos(pagination.current)
    },
    videos(page) {
      this.loading = true;
      console.log(this.fileType, 'fileType');

      if (this.fileType == '1') {
        var Chapterclassification = "video"
      } else {
        var Chapterclassification = "audio"
      }
      const params = {
        pageNo: page,
        fileType: Chapterclassification,
        fileName: this.searchchapter
      }
      console.log(params, 'params');
      getAction(this.url.videos, params)
        .then(res => {
          this.videosList = res.result.records;
          this.ipagination.total = res.result.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    Addnewdirectory(pid) {
      var that = this
      console.log(this.pid, 'pid');

      if (that.judge == '2') {
        var url = that.url.addCatalog
      }
      if (that.judge == '1') {
        var url = that.url.updateCatalog
      }
      if (pid == '0') {
        that.model.pid = '0';
      }
      if (pid == '1') {
        that.model.pid = that.pid;
      }
      that.model.courseId = that.courseId
      console.log('1');
      console.log(that.model.pid, 'pid');
      postAction(url, that.model).then(res => {
        // this.VideoCatalog = res.result
        // console.log(this.VideoCatalog, '目录');
        console.log('2');
        this.confirmLoading = true;
        this.catalogEditing = false;
        this.confirmLoading = false;

        that.CourseCatalog(that.courseId, this.type)
      }).finally(() => {
        that.loading = false
      })
    },
    bddnewdirectory(pid) {
      var that = this
      console.log(this.pid, 'pid');
      if (that.judge == '2') {
        var url = that.url.addCatalog
      }
      if (that.judge == '1') {
        var url = that.url.updateCatalog
      }
      that.model.pid = that.pid;
      that.model.courseId = that.courseId
      console.log(this.volcanoChapter.fileName, 'zhangjie');
      let chapter = {
        courseId: that.courseId,
        pid: that.pid,
        status: that.model.status,
        title: that.volcanoChapter.fileName,
        videoUrl: that.volcanoChapter.videoUrl,
        duration: that.volcanoChapter.duration,
        type: '2',
        fileType: this.fileType,
        sort: that.model.sort,
        imageUri: that.volcanoChapter.posterUri,
        id: that.model.id
      }
      console.log(that.model.pid, 'pid');
      console.log(url, 'pid');
      postAction(url, chapter).then(res => {

        this.confirmLoading = true;
        setTimeout(() => {
          this.Loadingchapter = false;
          this.confirmchapter = false;
        }, 100);
        this.getByPIdcontents(that.pid, this.fileType)
        that.$emit(res.message)
      }).finally(() => {
        that.loading = false
      })
    },
    bddnewdirectoryimg(pid) {
      var that = this
      console.log(this.pid, 'pid');
      if (that.judge == '2') {
        var url = that.url.addCatalog
      }
      if (that.judge == '1') {
        var url = that.url.updateCatalog
      }
      that.model.pid = that.pid;
      that.model.courseId = that.courseId
      console.log(this.volcanoChapter.fileName, 'zhangjie');
      let chapter = {
        courseId: that.courseId,
        pid: that.pid,
        status: '1',
        title: that.model.title,
        videoUrl: '1',
        duration: '1',
        type: '2',
        fileType: '3',
        sort: that.model.sort,
        imageUri: that.model.imageUri,
        id: that.model.id
      }
      console.log(that.model.pid, 'pid');
      console.log(url, 'pid');
      postAction(url, chapter).then(res => {

        this.catalogEditingimg = false;
        setTimeout(() => {
          this.Loadingchapter = false;
          this.confirmchapter = false;
        }, 100);
        this.getByPIdcontents(that.pid, this.fileType)
        that.$emit(res.message)
      }).finally(() => {
        that.loading = false
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.vidoetitle {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}

.videolist {
  margin-left: 100px;
  margin-top: 20px;
}

.videolisttitle {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-top: 10px;
}

.videolisttitleaction {
  width: 300px;
  margin-left: 30px;
}

.videowrapper {
  margin-top: 30px;
}

.videolisttitleactionbutton {
  margin-top: 13px;
  margin-left: 20px;
}

.vidoetitlebutton {
  margin-left: 20px;
}

.j-table-add-btn {
  margin-bottom: 10px;
}

.listtitleaction {
  display: flex;
  padding-left: 30px;
  align-items: center;
  margin-bottom: 30px;
}

.listtitleactionbutton {
  margin-left: 30px;
}
</style>